<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 设置页面字符编码为UTF-8 -->
    <meta charset="UTF-8" />
    <!-- 视口设置，确保页面在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 设置页面标题 -->
    <title>首页</title>
    <!-- 引入基础样式表 -->
    <link rel="stylesheet" href="../css/base.css" />
    <!-- 引入首页专用样式表 -->
    <link rel="stylesheet" href="../css/index.css" />
    <!-- 引入Swiper滑动效果库的样式 -->
    <link rel="stylesheet" href="../lib/swiper/swiper-bundle.min.css" />
  </head>
  <body>
    <!-- 头部区域，包含网站标题和用户登录信息 -->
    <div class="header container">
      <h1>仿站电商平台</h1>
      <!-- 未登录时显示的链接 -->
      <p class="active off" style="float: right; font-size: 24px">
        您好！<a href="./login.html" style="color: red">请登录</a>
      </p>
      <!-- 已登录时显示的用户信息和退出按钮 -->
      <p class="active off" style="float: right; font-size: 24px">
        你好！
        <span class="nickname">用户昵称</span>
        <button class="self">个人中心</button>
        <button class="logout">退出登录</button>
      </p>
    </div>
    <main>
      <!-- 购买商品链接 -->
      <div class="list container"><a href="./list.html">购买商品</a></div>
      <!-- Swiper滑动组件，用于展示轮播图 -->
      <div class="swiper">
        <div class="swiper-wrapper">
          <!-- 轮播图的每一项 -->
          <div class="swiper-slide">
            <img src="../img/img1.jpg" alt="本地测试图1" />
          </div>
          <div class="swiper-slide">
            <img src="../img/img2.jpg" alt="本地测试图2" />
          </div>
          <div class="swiper-slide">
            <img src="../img/img3.jpg" alt="本地测试图3" />
          </div>
          <div class="swiper-slide">
            <img src="../img/img4.jpg" alt="本地测试图4" />
          </div>
          <div class="swiper-slide">
            <img src="../img/img5.jpg" alt="本地测试图5" />
          </div>
          <!-- 更多轮播图项... -->
        </div>
        <!-- Swiper分页器 -->
        <div class="swiper-pagination"></div>
        <!-- Swiper前进后退按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </main>

    <!-- 引入Swiper滑动效果库 -->
    <script src="../lib/swiper/swiper-bundle.min.js"></script>
    <!-- 引入Axios库，用于发起HTTP请求 -->
    <script src="../lib/axios.min.js"></script>
    <!-- 引入http.js，可能包含自定义的HTTP请求封装 -->
    <script src="../lib/http.js"></script>
    <!-- 引入首页的JavaScript逻辑 -->
    <script src="../js/index.js"></script>
    <!-- Swiper初始化脚本 -->
    <script>
      const swiper = new Swiper(".swiper", {
        // 循环模式
        loop: true,
        // 自动播放
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        // 分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>